<template>
  <uni-popup ref="popup" v-model="visible" type="center" :mask-click="false">
    <view class="modal-content">
      <form @submit.prevent="onSubmit">
        <!-- 所属家族 -->
        <view class="form-item">
          <text>所属家族</text>
          <picker :range="familyOptions" range-key="label" @change="onFamilyChange">
            <view class="picker">{{ getFamilyLabel(formData.familyId) || "请选择" }}</view>
          </picker>
        </view>
        <!-- 姓 -->
        <view class="form-item">
          <text>姓</text>
          <input v-model="formData.firstName" placeholder="请输入姓" />
        </view>
        <!-- 名 -->
        <view class="form-item">
          <text>名</text>
          <input v-model="formData.lastName" placeholder="请输入名" />
        </view>
        <!-- 昵称 -->
        <view class="form-item">
          <text>昵称</text>
          <input v-model="formData.nickname" placeholder="请输入昵称" />
        </view>
        <!-- 字辈 -->
        <view class="form-item">
          <text>字辈</text>
          <picker :range="zibeiOptions" range-key="label" @change="onZibeiChange">
            <view class="picker">{{ getZibeiLabel(formData.genation) || "请选择" }}</view>
          </picker>
        </view>
        <!-- 性别 -->
        <view class="form-item">
          <text>性别</text>
          <picker :range="genderOptions" range-key="label" @change="onGenderChange">
            <view class="picker">{{ getGenderLabel(formData.gender) || "请选择" }}</view>
          </picker>
        </view>

        <!-- 是否在世 -->
        <view class="form-item">
          <text>是否在世</text>
          <picker :range="aliveOptions" range-key="label" @change="onAliveChange">
            <view class="picker">{{ getAliveLabel(formData.alive) || "请选择" }}</view>
          </picker>
        </view>
        <!-- 头像照片 -->
        <view class="form-item">
          <text>头像照片</text>
          <uni-file-picker v-model="formData.photoUrl" fileMediatype="image" :limit="1" />
        </view>
        <!-- 职业 -->
        <view class="form-item">
          <text>职业</text>
          <input v-model="formData.occupation" placeholder="请输入职业" />
        </view>
        <!-- 籍贯 -->
        <view class="form-item">
          <text>籍贯</text>
          <input v-model="formData.birthPlace" placeholder="请输入籍贯" />
        </view>
        <!-- 地址 -->
        <view class="form-item">
          <text>地址</text>
          <input v-model="formData.address" placeholder="请输入地址" />
        </view>
        <!-- 经度 -->
        <view class="form-item">
          <text>经度</text>
          <input v-model="formData.longitude" placeholder="请输入经度" />
        </view>
        <!-- 纬度 -->
        <view class="form-item">
          <text>纬度</text>
          <input v-model="formData.latitude" placeholder="请输入纬度" />
        </view>
        <!-- 出生日期 -->
        <view class="form-item">
          <text>出生日期</text>
          <picker mode="date" @change="onBirthDateChange">
            <view class="picker">{{ formData.birthDate || "请选择出生日期" }}</view>
          </picker>
        </view>

        <!-- 死亡日期 -->
        <view class="form-item">
          <text>死亡日期</text>
          <picker mode="date" @change="onDeathDateChange">
            <view class="picker">{{ formData.deathDate || "请选择死亡日期" }}</view>
          </picker>
        </view>
        <!-- 个人简介 -->
        <view class="form-item">
          <text>个人简介</text>
          <textarea v-model="formData.biography" placeholder="请输入个人简介" rows="3" />
        </view>
        <!-- 按钮 -->
        <view class="form-actions">
          <button form-type="submit">确定</button>
          <button @click.prevent="$emit('close')">取消</button>
        </view>
      </form>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

// 定义选项类型
interface OptionItem {
  label: string;
  value: number;
}

// 定义表单数据类型
interface FormData {
  familyId: string;
  firstName: string;
  lastName: string;
  nickname: string;
  genation: string;
  gender: string;
  alive: string;
  photoUrl: string;
  occupation: string;
  birthPlace: string;
  address: string;
  longitude: string;
  latitude: string;
  birthDate: string;
  deathDate: string;
  biography: string;
}

// 定义事件类型
interface PickerEvent {
  detail: {
    value: number;
  };
}

interface DateEvent {
  detail: {
    value: string;
  };
}

const props = defineProps<{
  familyOptions?: OptionItem[];
  zibeiOptions?: OptionItem[];
  genderOptions?: OptionItem[];
  aliveOptions?: OptionItem[];
  visible: boolean;
}>();

const emit = defineEmits<{
  (e: "close"): void;
  (e: "submit", data: FormData): void;
}>();

const visible = ref<boolean>(props.visible);

const formData = ref<FormData>({
  familyId: "",
  firstName: "",
  lastName: "",
  nickname: "",
  genation: "",
  gender: "",
  alive: "",
  photoUrl: "",
  occupation: "",
  birthPlace: "",
  address: "",
  longitude: "",
  latitude: "",
  birthDate: "",
  deathDate: "",
  biography: "",
});

watch(
  () => props.visible,
  (val) => {
    visible.value = val;
  }
);

function getFamilyLabel(val: string): string | undefined {
  return (props.familyOptions || []).find((i) => i.value === Number(val))?.label;
}

function getZibeiLabel(val: string): string | undefined {
  return (props.zibeiOptions || []).find((i) => i.value === Number(val))?.label;
}

function getGenderLabel(val: string): string | undefined {
  return (props.genderOptions || []).find((i) => i.value === Number(val))?.label;
}

function getAliveLabel(val: string): string | undefined {
  console.log(props.aliveOptions);
  return (props.aliveOptions || []).find((i) => i.value === Number(val))?.label;
}

function onFamilyChange(e: PickerEvent): void {
  try {
    const index = e.detail.value;
    if (props.familyOptions && index < props.familyOptions.length) {
      formData.value.familyId = String(props.familyOptions[index].value);
    }
  } catch (error) {
    console.error("Family selection error:", error);
  }
}

function onZibeiChange(e: PickerEvent): void {
  try {
    const index = e.detail.value;
    if (props.zibeiOptions && index < props.zibeiOptions.length) {
      formData.value.genation = String(props.zibeiOptions[index].value);
    }
  } catch (error) {
    console.error("Zibei selection error:", error);
  }
}

function onGenderChange(e: PickerEvent): void {
  try {
    const index = e.detail.value;
    if (props.genderOptions && index < props.genderOptions.length) {
      formData.value.gender = String(props.genderOptions[index].value);
    }
  } catch (error) {
    console.error("Gender selection error:", error);
  }
}

function onAliveChange(e: PickerEvent): void {
  try {
    const index = e.detail.value;
    if (props.aliveOptions && index < props.aliveOptions.length) {
      formData.value.alive = String(props.aliveOptions[index].value);
    }
  } catch (error) {
    console.error("Alive status selection error:", error);
  }
}

function onBirthDateChange(e: DateEvent): void {
  try {
    formData.value.birthDate = e.detail.value;
  } catch (error) {
    console.error("Birth date selection error:", error);
  }
}

function onDeathDateChange(e: DateEvent): void {
  try {
    formData.value.deathDate = e.detail.value;
  } catch (error) {
    console.error("Death date selection error:", error);
  }
}

function onSubmit(): void {
  emit("submit", { ...formData.value });
}
</script>

<style scoped>
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}

.form-item {
  margin-bottom: 12px;
}

.picker {
  padding: 8px 0;
  color: #666;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
</style>
